<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">教师</el-breadcrumb-item>
      <el-breadcrumb-item>课程设计任务</el-breadcrumb-item>
      <el-breadcrumb-item>课程设计教学安排</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">课程设计教学安排</h2>
    </div>

    <div style="margin: 3% 5% 3% 5%;">

      <!-- 筛选表格内容 -->
      <!-- <el-row :gutter="20" style=" margin-top: 20px; ">
        <el-col :span="3">
          <div class="grid-content ep-bg-purple">
            <el-select v-model="selsetDate" class="m-2" placeholder="选择学期" style="margin-left: 10px;">
              <el-option v-for="item in courseDate" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple">
            <el-select v-model="selsetClass" class="m-2" placeholder="选择课程">
              <el-option v-for="item in courseOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="17">
          <div class="grid-content ep-bg-purple">
            <el-input v-model="inputSearch" class="w-50 m-2" placeholder="搜索" :prefix-icon="Search"
              style="width: auto; margin-right: 10px;" />
            <el-button type="primary" :icon="Search">查询</el-button>
          </div>
        </el-col>
      </el-row> -->


      <h1>实践课题任务</h1>
      <!-- 表格1 -->
      <el-table :data="mySchema" height="550" style="width: 100%; margin-top: 10px;" >
        <el-table-column prop="courseName" label="实践课程"  />
        <el-table-column prop="teachName" label="任课老师" align="center"/>
        <el-table-column prop="majorName" label="专业名称" align="center"/>
        <el-table-column prop="className" label="班级" align="center"/>
        <el-table-column prop="onloadDate" label="时间" :formatter="formatDate" align="center"/>

        <el-table-column fixed="right" label="详情" width="120" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="downSchema(scope.row.courseId)">课程大纲</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script setup>
import { ArrowRight, Calendar, Search, Plus } from '@element-plus/icons-vue'
import { ref, onBeforeMount } from 'vue'
import requests from '@/api/ajax';

//   挂载前进行
onBeforeMount(() => {
  //初始显示老师所有的教学大纲
  const asd = requests({ url: "/inner/practicalTaskCourseVos", method: "get", }).then(res => {
    const abc = res.rdata
    mySchema.value = abc

  })
    .catch(err => {
      console.error(err);
      // 登录请求失败后的操作
    });
})

// 表格数据
const mySchema = ref([
  {
    practicalId: '',
    classId: "",
    className: "",
    adviserId: '',
    adviserName: "",
    teachId: '',
    teachName: "",
    practicalType: '',
    onloadDate: "",
    courseSchema: '',
    planId: '',
    courseId: '',
    courseName: "",
    startDate: '',
    majorName: "",
    enrolDate: ""
  },

])
function formatDate(row, column, cellValue, index) {
  let format = 'YYYY-mm'
  let date = new Date(cellValue);
  const dataItem = {
    'Y+': date.getFullYear().toString(),
    'm+': (date.getMonth() + 1).toString(),
    'd+': date.getDate().toString(),
  }
  Object.keys(dataItem).forEach((item) => {
    const ret = new RegExp(`(${item})`).exec(format);
    if (ret) {
      format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
    }
  });
  return format
}

//下载课程大纲
function downSchema(courseId) {

  const getReport = requests({ url: "/preview/practiceCourse/" + courseId, method: "get", responseType: 'blob', }).then(res => {

        // 将响应数据转换为 Blob 对象
        const blob = new Blob([res]);
        // 创建链接进行下载
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = '课程大纲.docx';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

    })
        .catch(err => {
            console.error(err);
            // 登录请求失败后的操作
        });
}

</script>